<template>
  <!-- 新增银行 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增银行"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      size="large"
      label-width="auto"
      label-position="top"
      status-icon
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="开户行名称" prop="bankName">
            <el-input
              v-model="ruleForm.bankName"
              placeholder="请输入开户行名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="支行名称" prop="bankBranchName">
            <el-input
              v-model="ruleForm.bankBranchName"
              placeholder="请输入支行名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="银行账号" prop="accountNo">
            <el-input
              v-model="ruleForm.accountNo"
              placeholder="请输入银行账号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="账户名称" prop="accountName">
            <el-input
              v-model="ruleForm.accountName"
              placeholder="请输入账户名称"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button size="large" :loading="buttonLoading" @click="handleClose"
        >取 消</el-button
      >
      <el-button
        size="large"
        :loading="buttonLoading"
        type="primary"
        @click="handleSubmit"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { deepClone } from "@/utils/index.js";
const { proxy } = getCurrentInstance();

const emits = defineEmits(["change"]);
const dialogVisible = ref(false);
const loading = ref(false);
const buttonLoading = ref(false);
const ruleForm = ref({});
const rules = ref({
  bankName: [
    {
      required: true,
      message: "请输入开户行名称",
      trigger: "blur",
    },
  ],
  bankBranchName: [
    {
      required: true,
      message: "请输入支行名称",
      trigger: "blur",
    },
  ],
  accountNo: [
    {
      required: true,
      message: "请输入银行账号",
      trigger: "blur",
    },
  ],
  accountName: [
    {
      required: true,
      message: "请输入账户名称",
      trigger: "blur",
    },
  ],
});
const ruleFormRef = ref();
const handleSubmit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      let url = `/sellerBankList/insert`;
      buttonLoading.value = true;
      const data = deepClone(ruleForm.value)
      if(data.id){
        url = '/sellerBankList/update'
      }
      await proxy.$post({ url, data });
      ElMessage.success("操作成功");
      handleClose();
      emits("change");
      buttonLoading.value = false;
    }
  });
};
const handleOpen = (item) => {
  loading.value = true;
  dialogVisible.value = true;
  try {
    if (item && item.id) {
      ruleForm.value = deepClone(item);
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const handleClose = () => {
  ruleForm.value = {}
  dialogVisible.value = false;
  ruleFormRef.value.resetFields();
};
defineExpose({
  handleOpen,
});
</script>

